
<template>
  <div id="role_top">
    <div style="display: inline-block;float: right">
      <el-button type="primary" @click="addRole">新增角色</el-button>
    </div>
    <div style="display: inline-block;float:left">
      <el-form>
        <el-form-item label="角色名称:">
          <el-input v-model.trim="roleName" @input="query()"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: inline-block;float:left">
      <el-form>
        <el-form-item label="角色秘钥:">
          <el-input v-model.trim="roleKey" @input="query()"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div id="role_from">
    <el-table :data="roleFromDataList" style="width: 100%">
      <el-table-column prop="roleName" label="角色名称"/>
      <el-table-column prop="roleKey" label="角色权限秘钥"/>
<!--      <el-table-column prop="status" label="状态"/>-->
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" width="300">
        <template #default="scope" >
          <el-button size="small" type="primary" @click="updateRole(scope.row)">编辑</el-button>
          <el-button size="small" type="danger"  @click="deleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right;padding-top: 1%">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"/>
    </div>
  </div>
  <div id="add_dialog">
    <el-dialog v-model="dialogFormVisible" title="添加角色" width="550">
      <el-form :model="addRoleObject" >
        <el-form-item label="角色名称">
          <el-input v-model.trim="addRoleObject.roleName" />
        </el-form-item>
        <el-form-item label="权限秘钥">
          <el-input v-model.trim="addRoleObject.roleKey" />
        </el-form-item>
        <el-form-item label="角色排序">
          <el-input v-model.trim="addRoleObject.roleSort" />
        </el-form-item>
        <el-form-item label="数据范围">
          <el-select v-model="addRoleObject.dataScope" placeholder="请选择">
            <el-option label="所有数据权限" value="1"/>
            <el-option label="本部门数据权限" value="3"/>
            <el-option label="本部门及以下数据权限" value="4"/>
            <el-option label="仅本人数据权限" value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限">
          <div id="menu_tree">
            <el-tree :data="menuList"  :props="defaultProps" show-checkbox accordion @check-change="handleCheckChange " default-expand-all/>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddRole">
          添加
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <div id="update_dialog">
    <el-dialog v-model="dialogUpdataFormVisible" title="修改角色" width="550">
      <el-form :model="updateRoleObject" >
        <el-form-item label="角色名称">
          <el-input v-model.trim="updateRoleObject.roleName" />
        </el-form-item>
        <el-form-item label="权限秘钥">
          <el-input v-model.trim="updateRoleObject.roleKey" />
        </el-form-item>
        <el-form-item label="角色排序">
          <el-input v-model.trim="updateRoleObject.roleSort" />
        </el-form-item>
        <el-form-item label="数据范围">
          <el-select v-model="updateRoleObject.dataScope" placeholder="请选择">
            <el-option label="所有数据权限" value="1"/>
            <el-option label="本部门数据权限" value="3"/>
            <el-option label="本部门及以下数据权限" value="4"/>
            <el-option label="仅本人数据权限" value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限">
          <div id="menu_tree">
            <el-tree :data="menuList"  node-key="menuId" :props="defaultProps" show-checkbox accordion @check-change="handleUpdateCheckChange " default-expand-all :default-checked-keys="updateRoleObject.menuIds"/>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogUpdataFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUpDataRole">
          修改
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  addRoleVue,
  deleteRoleById,
  getRoleListVue, selectMenuListByRoleId, selectOneByRoleId, updataVue
} from "../../api/system";
import {onMounted, ref,reactive} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {getMenuListByUser} from "../../api/home";
const dialogFormVisible =ref(false);
const dialogUpdataFormVisible =ref(false);
const menuList = ref([])
let pageNum = ref<any>(1);
let pageSize = ref<any>(10);
let roleName  = ref<any>('');
let roleKey  = ref<any>('');
let total = ref<any>(0)

const defaultProps = {
  children: 'children',
  label: 'menuName',
}
const addRoleObject = ref({
  roleId:null,
  roleName:null,
  roleKey:null,
  status:0,
  roleSort:null,
  dataScope:null,
  menuIds:[],
})
const updateRoleObject = ref({
  roleId:null,
  roleName:null,
  roleKey:null,
  status:0,
  roleSort:null,
  dataScope:null,
  menuIds:[],
})
const roleFromDataList = ref([])
onMounted(async () => {
    await query();
})
const query = async () => {
  let res = await getRoleListVue({
    pageNum:pageNum.value,
    pageSize :pageSize.value,
    roleName:roleName.value,
    roleKey:roleKey.value,
  })
  console.log(res.data.total);
  roleFromDataList.value = res.data.list
  total.value = res.data.total
}
const deleteRole = async (data) => {
  ElMessageBox.confirm('确认删除该角色?')
      .then(async () => {
        const res = await deleteRoleById({id: data.roleId})
        if (res.data === true) {
          ElMessage.success(res.msg)
          await query()
        }else{
          ElMessage.error(res.msg)
        }
      })
}
const addRole = async()=>{
  let res = await getMenuListByUser();
  menuList.value=res.data;
  dialogFormVisible.value =true;
  addRoleObject.value.roleId=null
  addRoleObject.value.roleName=null
  addRoleObject.value.roleKey=null
  addRoleObject.value.status=0
  addRoleObject.value.roleSort=null
  addRoleObject.value.dataScope=null
  addRoleObject.value.menuIds=[]
}
const handleCheckChange = (data, checked: boolean, indeterminate: boolean) => {
  if (checked) {
    addRoleObject.value.menuIds.push(data.menuId)
  } else {
    addRoleObject.value.menuIds.splice( addRoleObject.value.menuIds.indexOf(data.menuId), 1)
  }
}
const handleUpdateCheckChange = (data, checked: boolean, indeterminate: boolean) => {
  if (checked) {
    updateRoleObject.value.menuIds.push(data.menuId)
  } else {
    updateRoleObject.value.menuIds.splice( updateRoleObject.value.menuIds.indexOf(data.menuId), 1)
  }
}
const confirmAddRole = async () => {
  let res = await addRoleVue({
    roleName:addRoleObject.value.roleName,
    roleKey:addRoleObject.value.roleKey,
    status:0,
    roleSort:addRoleObject.value.roleSort,
    dataScope:addRoleObject.value.dataScope,
    menuIds:addRoleObject.value.menuIds,
  });
  if (res.code == 200) {
    ElMessage.success(res.msg)
    await query()
    dialogFormVisible.value =false;
  }else {
    ElMessage.error(res.msg)
  }

}
const updateRole = async (row) => {
  dialogUpdataFormVisible.value =true;
  let res = await selectOneByRoleId({id:row.roleId});
  let res2 = await selectMenuListByRoleId({id:row.roleId});
  menuList.value=res2.data;
  updateRoleObject.value.roleId=null
  updateRoleObject.value.roleName=null
  updateRoleObject.value.roleKey=null
  updateRoleObject.value.status=0
  updateRoleObject.value.roleSort=null
  updateRoleObject.value.dataScope=null
  updateRoleObject.value.menuIds=[]
  updateRoleObject.value.roleName =res.data.roleName
  updateRoleObject.value.roleKey =res.data.roleKey
  updateRoleObject.value.status =res.data.status
  updateRoleObject.value.dataScope =res.data.dataScope
  updateRoleObject.value.roleSort = res.data.roleSort
  updateRoleObject.value.roleId =res.data.roleId
  res2.data.forEach(s=>{
    if (s.isChecked == 1){
      updateRoleObject.value.menuIds.push(s.menuId);
    }
    if (s.children.length>0){
      s.children.forEach(c=>{
        if (c.isChecked == 1){
          updateRoleObject.value.menuIds.push(c.menuId);
        }
      })
    }
  })
}
const confirmUpDataRole = async () => {
  let res = await updataVue({
    roleId:updateRoleObject.value.roleId,
    roleName:updateRoleObject.value.roleName,
    roleKey:updateRoleObject.value.roleKey,
    status:updateRoleObject.value.status,
    roleSort:updateRoleObject.value.roleSort,
    dataScope:updateRoleObject.value.dataScope,
    menuIds:updateRoleObject.value.menuIds,
  });
  if (res.code == 200){
    ElMessage.success(res.msg)
    await query()
    dialogUpdataFormVisible.value =false;
  }else {
    ElMessage.error(res.msg)
  }
}
const handleCurrentChange = async (val: number) => {
  pageNum.value = val;
  await query()
}
</script>
<style scoped>
#menu_tree{
  width: 100%;
  height: 15rem;
  border: 1px solid #E8EAEE;
  border-radius: 6px;
  overflow-y: scroll;
}
</style>
